<template>
  <div class="order">
    <van-nav-bar title="订单列表"></van-nav-bar>
    <van-tabs v-model:active="active">
      <van-tab title="全部订单"></van-tab>
      <van-tab title="近期订单"></van-tab>
      <van-tab title="待支付"></van-tab>
      <van-tab title="待确认"></van-tab>
      <van-tab title="入住"></van-tab>
    </van-tabs>
    <div class="empty">
      <img src="@/assets/img/order/empty_order.png" alt="">
      近期暂无订单
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const active = ref(1);
</script>
<style lang="less" scoped>
.order {
  height: 100vh;
  background-color: #f7f9fb;
}
.empty {
  width: 100%;
  font-size: 18px;
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  img {
    width: 80%;
    margin-bottom: 20px;
  }
}
</style>